import React, { useState } from 'react'
import { Input, message } from 'antd'
import { UserOutlined, UnlockFilled, PhoneFilled } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import './login.styl'
import {login,userCreate} from '@src/api/user.js'
import md5 from 'js-md5'
import { useEffect } from 'react'
import {phoneExp} from '@src/utils/Regexp'

function Login() {
  const [formData, setFormData] = useState({})
  const [active, setActive] = useState(1)
  const navigate = useNavigate()
  const handleChange = (e, key) => {
    const value = e.target.value
    setFormData(Object.assign({}, formData, {
      [key]: value
    }))
  }
  const handleActive = (num) => {
    setActive(num)
  }
  const loginSubmit = async () => {
    if (formData.user_name && formData.password) {
      const res = await login({
        user_name: formData.user_name,
        password: md5(formData.password)
      })
      localStorage.setItem('userInfo', res.data)
      localStorage.setItem('token', res.data.token)
      navigate('/')
    } else {
      message.error('请输入用户名和密码')
    }
  }
  const registerSubmit = async () => {
    if (formData.user_name && formData.password && formData.phone) {
      if (!phoneExp.test(formData.phone)) {
        message.error('请输入正确手机号')
        return
      }
      const res = await userCreate({
        user_name: formData.user_name,
        phone: formData.phone,
        password: md5(formData.password)
      })
      message.success('注册成功请登录')
      setActive(1)
    } else {
      message.error('请输入所需数据')
    }
  }
  useEffect(() => {
    setFormData({})
  }, [active])
  return (
    <div className='login-wrapper'>
      <div className='login-main'>
        <div className='title'>
          <div className={`title-item ${active === 1 ? 'active' : null}`} onClick={() => handleActive(1)}>登录</div>
          <div className={`title-item ${active === 2 ? 'active' : null}`} onClick={() => handleActive(2)}>注册</div>
        </div>
        <div className='login-inputs'>
          { active === 1 ? 
            <>
              <div className='login-input'>
                <Input size="large" placeholder="请输入用户名" value={formData.user_name} onChange={(e) => handleChange(e, 'user_name')} prefix={<UserOutlined />} />
              </div>
              <div className='login-input'>
                <Input.Password size="large" placeholder="请输入密码" value={formData.password} onChange={(e) => handleChange(e, 'password')} prefix={<UnlockFilled />}/>
              </div>
              <div className='login-btn' onClick={loginSubmit}>
                登录
              </div>
            </> : 
            <>
              <div className='login-input'>
                <Input size="large" placeholder="请输入用户名" value={formData.user_name} onChange={(e) => handleChange(e, 'user_name')} prefix={<UserOutlined />} />
              </div>
              <div className='login-input'>
                <Input.Password size="large" placeholder="请输入密码" value={formData.password} onChange={(e) => handleChange(e, 'password')} prefix={<UnlockFilled />}/>
              </div>
              <div className='login-input'>
                <Input size="large" placeholder="请输入手机号" value={formData.phone} onChange={(e) => handleChange(e, 'phone')} prefix={<PhoneFilled />} />
              </div>
              <div className='login-btn' onClick={registerSubmit}>
                注册
              </div>
            </>
          }
          
        </div>
      </div>
    </div>
  )
}

export default Login;
